<template lang="pug">
  v-container
    Details(ref="details" @refresh="refresh")
    v-card
      v-toolbar
        v-text-field(prepend-inner-icon="search" placeholder="搜索" hide-details v-model="query" clearable)
        v-spacer
        v-toolbar-items
          v-btn(text @click="refresh") 刷新
          v-btn(text @click="delFeeFormula") 删除
          v-btn(text @click="add") 新增
      v-divider
      v-card-text.pa-0.mt-4
        DataTable(@edit="edit" ref="dataGrid" :query.sync = "query")

</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import DataTable from './fee_formula_data_table.vue'
  import {emptyFeeFormula, FeeFormula} from '@/store/modules/types/FeeFormula'
  import Details from './fee_formula_details'
  import {mapActions, mapMutations} from 'vuex'

  export default (Vue as VueConstructor<Vue & {
    $refs:{
      dataGrid: DataTable
      details: Details
    }
  }>).extend({
    name: 'fee_formula',
    components: { DataTable, Details },
    methods: {
      ...mapMutations("feeFormula", ["setActive"]),
      ...mapActions("feeFormula", ["del"]),
      add(){
        this.feeFormula = emptyFeeFormula()
        this.setActive(this.feeFormula)
        this.$refs.details.create('新增计费规则')
      },
      refresh(){
        this.$refs.dataGrid.refresh()
      },
      delFeeFormula() {
        this.$confirm({
          body: '确认删除？'
        }).then(()=>{
          this.del(this.$refs.dataGrid.selected)
        }).then(this.refresh)
      },
      edit(item: FeeFormula) {
        this.setActive(item)
        this.feeFormula = item
        this.$refs.details.toggle(`计费规则 ${this.feeFormula.name}`)
      }
    },
    data() {
      return {
        query: '',
        feeFormula: {} as FeeFormula
      }
    }
  })
</script>